<template>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 30, 50]"
    :total="total"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  total: number
  page: number
  limit: number
}

interface Emits {
  (e: 'update:page', value: number): void
  (e: 'update:limit', value: number): void
  (e: 'pagination'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const currentPage = computed({
  get: () => props.page,
  set: (value) => emit('update:page', value)
})

const pageSize = computed({
  get: () => props.limit,
  set: (value) => emit('update:limit', value)
})

const handleSizeChange = (val: number) => {
  emit('update:limit', val)
  emit('pagination')
}

const handleCurrentChange = (val: number) => {
  emit('update:page', val)
  emit('pagination')
}
</script>
